目录层级结构如下：
home/store/reducer下存储的是home模块的数据，数据最后都将会导入到store/reducer中去，因为我们使用了combineReducers，这样可以将reducer分开写。
home/store/reducer内容如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18import { fromJS } from 'immutable'
const defaultState = fromJS({
topicList: [
{
id: 1,
title: "社会热点",
imgUrl: ""
}
]
});
export default (state = defaultState, action ) => {
switch(action.type){
default:
return state;
}
}
store/reducer 中代码如下：1
2
3
4
5
6
7
8
9
10import { combineReducers } from 'redux-immutable'
import { reducer as herderReaducer } from '../common/header/store';
import { reducer as homeReaducer } from '../pages/home/store';
const reducer = combineReducers({
header: herderReaducer,
home: homeReaducer
})
export default reducer;
当然还需要使用connect才能在Tocpic组件中使用这些数据1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35import React, { Component } from 'react'
import
{
TopicWrapper,
TopicItem
} from '../style';
import { connect } from 'react-redux'
class Topic extends Component {
render(){
const { list } = this.props
return (
<TopicWrapper>
{
list.map((item) => {
return (
<TopicItem key={ item.get('id') }>
<img className='topic-pic' src={ item.get('imgUrl') }/>
{ item.get('title') }
</TopicItem>
)
})
}
</TopicWrapper>
)
}
}
const mapState = (state) => ({
list: state.get('home').get('topicList')
})
export default connect(mapState, null)(Topic);